<!DOCTYPE html>
<html>
<head lang="en">
    <title>Excel导入</title>
    <link rel="stylesheet" href="/static/resources/bootstrap/css/bootstrap.css"/>
    <link href="/static/resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="/static/resources/css/style.css" rel="stylesheet">
    <link href="/static/resources/css/exam.css" rel="stylesheet">
    <!-- Javascript files -->
    <!-- jQuery -->
    <script type="text/javascript" src="/static/resources/js/jquery/jquery-3.1.1.min.js"></script>
    <!--VUE-->
    <script type="text/javascript" src="/static/resources/vue/vue.js"></script>
    <script type="text/javascript" src="/static/resources/vue/date.js"></script>
    <!-- Bootstrap JS -->
    <script type="text/javascript" src="/static/resources/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<header>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container">
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href=""><i class=""></i>批量导入</a>
                    </li>

                    <li>
                        <a href="/view/question/question-add"><i class=""></i>单个添加</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<div style="padding-left: 50px;padding-right: 50px">
<div class="page-header">
    <h1><i class="fa fa-cloud-upload"></i> 导入试题 </h1>
</div>
<form id="app" role="form" action="/fileUpload" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label class="sr-only" for="field">请选择分类</label>
        <select class="form-control" id="field">
            <option v-for="(item,index) in fieldListresult" v-bind:value="item.fieldId">{{item.fieldName}}</option>
        </select>
    </div>
    <div class="form-group">
        <label for="download">下载模板</label><br>
        <a id="download" href="/static/xlsx/questions.xlsx"
           style="color:rgb(22,22,22);text-decoration: underline;">点击下载</a>
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" class="btn btn-default" id="inputfile" name="fileName">
    </div>
    <button type="button" id="button" class="btn btn-primary">提交</button>
</form>
</div>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            fieldListresult: []
        }
    });
    //查询分类列表信息 郭瀚钰
    function getAllField() {
        $.ajax({
            type: 'post',
            url: '/getAllField',
            dataType: 'json',
            success: function (msg) {
                app.fieldListresult = msg
            }, error: function () {
              //  alert("分类列表失败")
            }
        })
    }
    $(function () {
        getAllField();

        $("#button").click(function () {
            var formData = new FormData();
            var file = $(':file').prop('files');
            formData.append("fileName", file[0]);
            formData.append("fieldId", $("#field").val());
            //alert(formData);
            $.ajax({
                type: 'post',
                url: '/fileUpload',
                data: formData,
                cache: false,
                processData: false,  //tell jQuery not to process the data
                contentType: false,  //tell jQuery not to set contentType
                success: function (data) {
                    alert("导入成功");
                }
            })
        })
    })


</script>